<template>
	<div class="main">
		<div class="eye">
			<ul class="title">
				<li>检测项目</li>
				<li>数值</li>
				<li @click="toHistory()">
					<img src="./../../assets/images/icon_menu.png">
				</li>
			</ul>
			<ul class="list">
				<li>
					<div class="doubled">
						<span class="left">视力</span>
						<span class="middle">{{left}}(左)</span>
						<span class="right">{{right}}(右)</span>
					</div>
					<div class="single">
						<span class="left">屈光参差</span>
						<span class="right">{{cencha}}</span>
					</div>
				</li>
			</ul>
		</div>
		<!-- 检测建议 -->
		<result type="success" :name="name" :rank="hege" v-if="hege == '合格'"></result>
		<result type="failed" :name="name" :rank="hege" v-else></result>
	</div>
</template>

<script>
import result from './../../components/eye/result.vue'
export default {
	components:{
		"result":result
	},
	data () {
		return {
			name:"", //姓名
			eye:"", //视力
			cencha:"", //屈光参差
			hege:"", //合格
			left:"", //左眼
			right:"", //右眼
			
			//其他
			lastId:"",
		}
	},
	methods:{
		list:function(){
			this.$axios.get('/physical/vis',{
				params:{
					studentUid:this.common.getCookie('studentUid'),
					//studentUid:'725a5ea6097811e99c936045cb8a6621',
					collectionUid:this.lastId?this.lastId:this.common.getCookie('planId')
				}
			})
			.then(res=>{
				if(res.data.code == 1){
					this.hege = res.data.data.evaluate; //合格
					if(res.data.data.vision){
						this.left = res.data.data.vision.lseVis; //左眼
						this.right = res.data.data.vision.rseVis; //右眼
					}
					if(res.data.data.antimetropia){
						this.cencha = Math.abs(res.data.data.antimetropia.lseeFix - res.data.data.antimetropia.rseeFix);// 屈光参差
					}
				}
			})
		},
		//跳到历史记录
		toHistory:function(){
			this.$router.push({path:"/eye/history"});
		}
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		document.title = "视力数据";
		this.name = this.common.getCookie('name');
		//如果是详情页
		if(this.$route.query.id){
			this.lastId = this.$route.query.id;
		}
	}
}
</script>

<style lang="scss" scoped>
	.eye{
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		box-shadow:0 0 5px #ccc;
		border-radius: 6px;
		.title{
			display: flex;
			border-bottom: 1px solid #E9E9E9;
			padding-bottom: 12px;
			li{
				font-weight: bold;
			}
			li:nth-child(1){
				width: 40%;
				text-align: center;
			}
			li:nth-child(2){
				width: 50%;
				text-align: center;
			}
			li:nth-child(3){
				width: 10%;
				text-align: right;
				img{
					width: 20px;
					display: inline;
				}
			}
		}
		.list li{
			.doubled{
				width: 100%;
				display:flex;
				padding: 15px 0;
				border-bottom: 1px solid #eee;
				.left{
					width: 40%;
					text-align: center;
				}
				.middle{
					width: 30%;
					text-align: center;
				}
				.right{
					width: 30%;
					text-align: center;
				}
			}
			.single{
				width: 100%;
				display:flex;
				padding: 15px 0;
				border-bottom: 1px solid #eee;
				.left{
					width: 40%;
					text-align: center;
				}
				.right{
					width: 50%;
					text-align: center;
				}
			}
		}
	}
</style>